<template>
	<view class="list-wrapper">
		<view class="pore" style="z-index: 999;">
			<u-navbar :title="title|| '家政'" :fixed="true" bgColor="transparent" autoBack>
			</u-navbar>
		</view>
		<!-- <view class="pore">
			<image :src="api_host + img_url" mode="widthFix" class="width100"></image>
			<view class="ban-logo">
				<view class="c343 f46 italic-text bold">{{title}}</view>
			</view>
		</view> -->
		<view class="bgFff p10 radius50 flex-jus serach-wrap">
			<u-search placeholder="家政" v-model="keyword" clearabled bgColor="#fff"
				:showAction="false"></u-search>
			<view>
				<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','padding':'0 40rpx'}"
					shape="circle" @tap="handleSearch">搜索</u-button>
			</view>
		</view>
		<station-tabs :stations="categoryList" :tabIndex="tabIndex" @station-change="handleStationChange"
			@filter-change="handleFilterChange"></station-tabs>
		<view class="tabs-wrapper">
			<view v-for="(item, index) in tabs" :class="['tab-btn', {'active': currentIndex === index}]"
				@click="handleSelectTab(item, index)" :key="index">{{ item.name }}
			</view>
		</view>
		<view class="content-box">
			<goods-list v-if="listData.length" :dataArray="listData"></goods-list>
			<view v-else class="no-data">
				<text>暂无数据</text>
			</view>
		</view>
		<view class="back-top pore">
			<u-back-top :scroll-top="scrollTop" bottom="200" :customStyle="{'backgroundColor':'#FFDE6D'}"
				:iconStyle="{'color':'#000','fontSize':'40rpx','fontWeight':'bold'}"></u-back-top>
		</view>
	</view>
</template>

<script>
	import goodsList from '@/components/goodsList/index.vue'
	import StationTabs from './StationTabs.vue'
	import {
		getHomes,
		getHomelist
	} from '@/common/api_housekeeping.js'
	import {
		getBanners
	} from '@/common/api_user.js'
	export default {
		name: '',
		components: {
			goodsList,
			StationTabs
		},
		data() {
			return {
				scrollTop: 0,
				img_url: '',
				ban: {},
				title: '',
				listData: [],
				categoryList: [],
				keyword: '',
				currentIndex: 0,
				tabIndex: 0,
				longitude: '',
				latitude: '',
				tabs: [
				// {
				// 	type: 0,
				// 	name: '政府补贴'
				// }, 
				{
					type: 1,
					name: '距离优先'
				}, {
					type: 2,
					name: '销量优先'
				}]
			}
		},
		onShow() {
			// 检查是否已授权地理位置权限
			const _this = this
			uni.getSetting({
				success(res) {
					console.log(res, 'getSetting')
					if (!res.authSetting['scope.userLocation']) {
						// 未授权，需要进行授权
						uni.authorize({
							scope: 'scope.userLocation',
							success() {
								// 用户已同意授权地理位置信息
								console.log('地理位置授权成功');
								// 可以在这里调用获取地理位置的API
								_this.getLocationInfo()
							},
							fail() {
								// 用户拒绝授权地理位置信息
								uni.showModal({
									title: '提示',
									content: '此功能需要获取您的地理位置信息，请确认授权',
									success: function(modalRes) {
										if (modalRes.confirm) {
											// 引导用户去设置中开启权限
											uni.openSetting();
										} else if (modalRes.cancel) {
											_this.rejectGetLocation()
										}
									}
								});
							}
						});
					} else if (res.authSetting['scope.userLocation']) {
						// 已授权，可以直接调用获取地理位置的API
						_this.getLocationInfo()
					}
				}
			});
		},
		onLoad(option) {
			this.id = option.id
			this.title = option.name
			this.img_url = option.img_url
			this.tabIndex = Number(option.index) || 0
			console.log(option, this.tabIndex, 'option')
			//this.getBanners()
			
			this.getCategoryList()
		},
		// computed: {
		// 	stations() {
		// 		return this.categoryList
		// 	}
		// },
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			handleSearch() {
				this.getHomelist()
			},
			handleStationChange(item, index) {
				// Handle station change
				this.id = item.id
				this.getHomelist()
				console.log('Station changed:', item, index);
			},
			handleFilterChange(item, index) {
				// Handle filter change
				this.id = item.id
				this.getHomelist()
				console.log('Filter changed:', index);
			},
			handleSelectTab(item, index) {
				this.currentIndex = index
				this.getHomelist()
			},
			async getBanners() {
				uni.showLoading({
					mask: true
				})
				const res = await getBanners({
					affiliation: '2',
					subId: this.id
				})
				if (res.code == 200) {
					this.ban = res.data[0] || {}
				}
				uni.hideLoading()
			},
			async getHomelist() {
				uni.showLoading({
					mask: true
				})
				const res = await getHomes({
					id: this.id,
					keyword: this.keyword,
					longitude: this.longitude,
					latitude: this.latitude,
					queryTag: this.tabs[this.currentIndex].name
				})
				if (res.code == 200) {
					this.listData = res.data
				}
				uni.hideLoading()
			},

			// 分类列表
			async getCategoryList() {
				const res = await getHomelist()
				if (res.code == 200) {
					const {
						homeTypes
					} = res.data
					this.categoryList = homeTypes
					console.log(this.categoryList, 'this.categoryList')
				}
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				console.log('进入getLocationInfo方法')
				uni.getLocation({
					type: "gcj02",
					success: function(res) {
						// 暂时
						console.log(res, 456789)
						that.longitude = res.longitude; //118.787575;
						that.latitude = res.latitude; //32.05024;
						that.getHomelist()
						console.log("获取当前的用户经度", that.longitude);
						console.log("获取当前的用户纬度", that.latitude);
					},
					fail: function(err) {
						console.log(err, 999999)
						let system = uni.getSystemInfoSync();
						console.log(system.locationEnabled, '手机gps定位服务')
						// 用户拒绝授权或未开启定位
						uni.showModal({
							title: '提示',
							content: '此功能需要获取您的位置信息，请开启手机定位服务,再重新进此页面',
							success: function(modalRes) {
								if (modalRes.confirm) {
									// 引导用户去设置中开启定位服务
			
								} else {
									that.rejectGetLocation()
								}
							}
						});
					}
				});
			},
			
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "您拒绝了授权，无法为您提供距离显示服务",
					icon: "none",
					duration: 2000,
				});
				this.getStoreDetail()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F9F6;
	}
	
	.list-wrapper {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.ban-logo {
		position: absolute;
		top: 40%;
		left: 50rpx;
	}

	.item-img {
		image {
			width: 250rpx;
			height: 300rpx;
			border-radius: 50rpx 50rpx 0 50rpx;
		}
	}

	.serach-wrap {
		margin-top: 180rpx;
	}

	.content-box {
		min-height: 60vh;
		margin-top: 40rpx;
	}

	.tabs-wrapper {
		display: flex;

		.tab-btn {
			margin-right: 32rpx;
			padding: 14rpx 30rpx;
			font-weight: 400;
			font-size: 12px;
			color: rgba(52, 49, 79, 1);
			line-height: 17px;
			text-align: center;
			border-radius: 16px;

			border: 1px solid rgba(52, 49, 79, 1);

			&.active {
				color: #21B9AD;
				border: 1px solid #21B9AD;
			}
		}
	}
	
	.no-data {
		position: absolute;
		top: 60%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
	}

</style>